<template>
  <div class="recharge" v-if="show" @click.self="close">
    <div class="content" :class="{active: selfShow}">
      <div class="popup-title">
        余额充值
        <div class="close" @click="close">╳</div>
      </div>
      <div class="items">
        <div class="hint">充值账户</div>
        <div class="list-items" style="margin-top: 0">
          <div class="list-item">
            <div class="item-content">
              <div class="icon item-icon">&#xe655;</div>
              <div class="title" v-if="userInfo.nickname">{{userInfo.nickname}}</div>
              <div class="title" v-else-if="userInfo.username">{{userInfo.username}}</div>
              <div class="title" v-else>{{userInfo.mobile}}</div>
              <div class="notice">账户余额:</div>
              <div class="notice danger">￥{{(Number(userInfo.balance) / 100).toFixed(2)}}</div>
              <!--<div class="icon">&#xe64a;</div>-->
            </div>
          </div>
        </div>
        <div class="hint">点击下方金额进行充值</div>
        <div class="quotas">
          <template
            v-for="(quota, idx) in quotas">
            <div
              class="quota"
              :key="idx"
              v-if="quota === 0.1 && userInfo.develop === 2"
              @click="submit(quota)">{{quota}}元</div>
            <div
              class="quota"
              :key="idx"
              v-if="quota !== 0.1"
              @click="submit(quota)">{{quota}}元</div>
          </template>
        </div>
        <div class="hint">其他金额</div>
        <div class="input">
          <input type="number" v-model.trim="quota" placeholder="充值金额不能低于10元">
          <div class="submit" @click="otherQuotaSubmit">充值</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selfShow: false,
      quota: '',
      quotas: [0.1, 50, 100, 200, 500, 1000, 2000]
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.selfShow = val
          }, 50)
        })
      }
    }
  },
  methods: {
    otherQuotaSubmit () {
      if (!Number(this.quota)) {
        this.toast('请输入正确的金额')
        return false
      }
      if (Number(this.quota) < 10) {
        this.toast('充值金额不能小于10元')
        return false
      }
      this.submit(this.quota)
    },
    /**
     *  @purpose 提交数据创建订单
     */
    submit (quota) {
      this.showLoading()
      this
        .$api
        .member
        .recharge(quota)
        .then(r => {
          // 获取微信凭证 唤起微信支付
          this.onBridgeReady(r.voucher, r.order_no)
        })
        .catch(() => {
          this.showLoading()
        })
    },
    /**
   * 唤起微信支付
   * @param voucher 支付凭证
   * @param orderNo 订单号
   */
    onBridgeReady (voucher, orderNo) {
      window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest', voucher,
        res => {
          this.closeLoading()
          if (res.err_msg === 'get_brand_wcpay_request:ok') {
            this.showLoading()
            this
              .$api
              .member
              .rechargeSync(orderNo)
              .then(r => {
                this.toast('充值成功')
                this.$store.dispatch('getUserInfo', () => {
                  this.close()
                })
              })
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            // 同步请求数据
          } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
            this.toast('支付被取消!')
            // this.jump({name: 'order.detail', params: {order_no: orderNo}}, false, true)
          } else {
            window.alert(JSON.stringify(res))
          }
        })
    },
    /**
     * @purpose 关闭
     */
    close () {
      this.selfShow = false
      setTimeout(() => {
        this.$emit('update:show', false)
      }, 300)
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  }
}
</script>
<style scoped lang="sass">
  .recharge
    width: 100%
    height: 100%
    background-color: rgba(0,0,0,0.5)
    position: fixed
    top: 0
    left: 0
    z-index: 100
    display: flex
    justify-content: center
    .content
      width: 100%
      background-color: #f4f4f4
      height: 80%
      position: absolute
      bottom: -80%
      transition: all .3s
      -webkit-backface-visibility: hidden
      -moz-backface-visibility: hidden
      -ms-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-perspective: 1000
      -moz-perspective: 1000
      -ms-perspective: 1000
      perspective: 1000
      &.active
        bottom: 0
      .popup-title
        width: 100%
        height: 45px
        display: flex
        align-items: center
        justify-content: center
        font-size: 1rem
        border-bottom: 1px solid #f4f4f4
        position: relative
        .close
          width: 45px
          height: 45px
          position: absolute
          top: 0
          right: 0
          display: flex
          align-items: center
          justify-content: center
          font-size: .8rem
          &:active
            background-color: #f4f4f4
      .items
        width: 100%
        height: calc(100% - 45px)
        overflow-x: hidden
        overflow-y: auto
        -webkit-overflow-scrolling: touch
        overflow-scrolling: touch
        .quotas
          width: 100%
          height: auto
          overflow: hidden
          .quota
            width: calc(33.333% - 1px)
            height: 60px
            float: left
            background-color: #ffffff
            display: flex
            align-items: center
            justify-content: center
            font-size: 1rem
            color: #ff4700
            margin-bottom: 1px
            margin-left: 1px
            &:active
              background-color: #f4f4f4
        .input
          width: calc(100% - 20px)
          margin: 0 10px
          height: 45px
          background-color: #ffffff
          display: flex
          align-items: center
          justify-content: center
          border-top-left-radius: 3px
          border-bottom-left-radius: 3px
          input
            flex: 1
            height: 45px
            padding: 0 10px
            font-size: 1rem
            background-color: #ffffff
            border-top-left-radius: 3px
            border-bottom-left-radius: 3px
          .submit
            width: 100px
            height: 100%
            background-color: #ff4700
            display: flex
            align-items: center
            justify-content: center
            color: #ffffff
            border-top-right-radius: 3px
            border-bottom-right-radius: 3px
</style>
